块元素、行内元素和行内块元素是HTML中的三种基本元素类型，它们在页面布局和样式控制中有着不同的特点和用途。以下是它们之间的主要区别：

块元素（Block-level Elements）

1. 布局特性：块级元素会在页面中单独占据一行或多行的空间，通常从新行开始，并且宽度默认是父元素的100%。
2. 尺寸设置：块级元素可以设置width、height属性来控制其宽度和高度。
3. 边距设置：块级元素可以设置margin和padding属性，这些属性会影响元素与其他元素之间的距离。
4. 嵌套规则：块级元素可以包含其他块级元素和行内元素。
5. 常见示例：常见的块级元素包括<div>、<p>、<h1>至<h6>、<ul>、<ol>、<li>、<header>、<footer>、<section>等。

行内元素（Inline Elements）

1. 布局特性：行内元素不会独占一行，相邻的行内元素会在同一行显示，直到一行排不下时才会换行。其宽度由内容决定。
2. 尺寸设置：行内元素设置width、height属性无效，即不能直接通过这两个属性来控制其尺寸。
3. 边距设置：行内元素的水平方向（padding-left、padding-right、margin-left、margin-right）的边距属性会产生效果，但竖直方向（padding-top、padding-bottom、margin-top、margin-bottom）的边距属性不会产生边距效果。
4. 嵌套规则：行内元素不能包含块级元素，只能包含其他行内元素或文本。
5. 常见示例：常见的行内元素包括<span>、<a>、<strong>、<em>、<img>（在特定情况下，如未设置display属性为block时）、<br>、<input>（未设置display属性为block或其他块级表现时）等。

行内块元素（Inline-block Elements）

1. 布局特性：行内块元素表现类似于行内元素，即不会独占一行，但可以设置宽高、内外边距等属性。多个行内块元素可以在一行显示。
2. 尺寸设置：行内块元素可以设置width、height、margin、padding属性来控制其尺寸和边距。
3. 嵌套规则：行内块元素可以包含行内元素和行内块元素，但不能直接包含块级元素（除非块级元素被设置为行内块或其他非块级表现）。
4. 常见示例：常见的行内块元素包括<img>（在默认或未设置display属性为block时）、<input>（在默认或特定样式下）、<button>等。需要注意的是，某些元素如<input>和<img>在默认情况下可能表现为行内元素或行内块元素，这取决于具体的HTML和CSS设置。

总结

• 块级元素独占一行，可以设置宽高和边距，常用于页面布局。
• 行内元素不独占一行，宽度由内容决定，不能设置宽高（但可以通过其他方式如内联样式或外部CSS类来控制尺寸和样式），常用于文本和链接等内容的展示。
• 行内块元素结合了块级元素和行内元素的特性，不独占一行但可以设置宽高和边距，常用于需要在同一行显示且需要控制尺寸的元素的布局。

通过理解这三种元素类型的特性和用途，可以更好地控制网页的布局和样式。